<template>
  <van-action-sheet v-model:show="visible" title="AI币充值">
    <div
      class="mt-20 mx-20 pl-30 pr-15 pt-20 h-100 rounded-12 bg-FAFAFA text-12 flex"
    >
      <div class="flex flex-col mr-auto">
        <div>剩余AI币</div>
        <div class="mt-2 leading-40 font-bold text-28">
          {{ assetDetailsInfoParam.assetBalance }}
        </div>
      </div>
      <div
        class="flex text-333333 items-start"
        @click="navigateTo('AICoinRecord')"
      >
        <div>AI币明细</div>
        <div class="iconfont icon-gengduo text-12" />
      </div>
    </div>
    <div>
      <div class="mt-20 mx-20 font-bold text-16">请选择充值额度</div>
      <div class="pl-20 mt-15">
        <NormalTabs
          :tabs="specificationTabs"
          :active-id="activeSpecificationId"
          @update:active-id="activeSpecificationId = $event"
        >
          <template #item="{ tab, setItemRef, handleTabClick }">
            <div
              :ref="setItemRef"
              class="mr-15 px-10 h-100 w-100 rounded-12 border-2 border-solid flex-shrink-0 flex justify-center items-center flex-col"
              :class="{
                'border-2614FF c-bg-2614FF-5 text-333333':
                  activeSpecificationId === tab.id,
                'text-999999': activeSpecificationId !== tab.id
              }"
              @click="handleTabClick"
            >
              <div class="flex items-center">
                <img
                  :src="`${IMG_CDN_39}/member/ai_coin_icon2.png`"
                  class="w-16 h-16"
                  alt="AI币"
                />
                <div class="pl-5 text-333333 font-bold text-18">
                  {{ tab.name }}
                </div>
              </div>
              <div>￥{{ tab.money }}</div>
            </div>
          </template>
        </NormalTabs>
      </div>
      <div class="mt-10 mx-20 text-12 text-999999">
        <div>1、充值AI币永久有效，重复购买可叠加</div>
        <div class="mt-5">
          2、视频合成 AI 币消耗因类型而异，实际消耗以系统显示为准
        </div>
      </div>
    </div>
    <div class="px-20">
      <!-- 使用独立的 ButtonFooter 组件 -->
      <ButtonFooter class="mt-50" />
      <div class="h-50 flex justify-center items-center text-12">
        <div
          class="h-14 w-14 relative rounded-[50%] border border-solid"
          :class="
            isAgree
              ? 'bg-2614FF flex justify-center items-center border-2614FF'
              : 'border-CCCCCC'
          "
          @click="toggleAgree"
        >
          <svg-icon v-if="isAgree" name="icon-duihao" :size="8" color="#fff" />
        </div>
        <div class="text-666666 pl-5">阅读并同意</div>
        <div class="text-4D00FF">《购买协议》</div>
      </div>
    </div>
  </van-action-sheet>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { AssetDetailsInfoData, getSpecificationList } from "@/api/Member";
import NormalTabs from "@/components/NormalTabs/index.vue";
import { IMG_CDN_39 } from "@/constants";
import router from "@/router";

const props = defineProps({
  show: {
    type: Boolean,
    required: true,
    default: false
  }
});

const emit = defineEmits(["update:show"]);

const visible = ref(props.show);
// 是否同意协议
const isAgree = ref(false);
// 切换同意状态
const toggleAgree = () => {
  isAgree.value = !isAgree.value;
};

// 监听父组件传递的 show 值变化
watch(
  () => props.show,
  newVal => {
    visible.value = newVal;
    if (newVal) {
      getSpecificationListPort();
    }
  }
);

// 当弹窗关闭时通知父组件
watch(visible, newVal => {
  if (!newVal) {
    emit("update:show", false);
  }
});
// 选择数据
const activeSpecificationId = ref("");
// 将规格数据转换为标签格式
const specificationTabs = computed(() => {
  return assetDetailsInfoParam.value.specificationList.map(item => ({
    id: item.id,
    name: item.assetAmount,
    money: item.price
  }));
});

/** 分类请求列表 */
const assetDetailsInfoParam = ref<AssetDetailsInfoData>({
  /** 资产详情 */
  assetBalance: 0,
  /** 规格列表 */
  specificationList: []
});
/** 分类请求接口 */
const getSpecificationListPort = async () => {
  assetDetailsInfoParam.value = await getSpecificationList();
  if (assetDetailsInfoParam.value.specificationList.length === 0) return;
  activeSpecificationId.value =
    assetDetailsInfoParam.value.specificationList[0].id;
};
// 导航到指定页面
const navigateTo = (routeName: string) => {
  router.push({ name: routeName });
};
</script>

<style scoped>
.content {
  min-height: 200px;
}
</style>
